<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Pragma" content="no-cache">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scaleble=no" />
		<title>华信智源教学调查表</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/unique.css" />
		<style>
			td {
				border: 1px solid #969696;
			}
			
			table,
			th {
				border: 2px solid #969696 !important;
				font-size: 15px;
				color: #000000;
			}
			
			.highlight {
				vertical-align: middle !important;
				text-align: center !important;
				font-weight: bold;
				border: 2px solid #969696;
				· font-size: 15px;
			}
		</style>
	</head>

	<body>
		<div class="container unique">
			<div class="header row">
				<div class="col-lg-6 col-sm-4 col-xs-6"><img src="img/logo.png" class="img-responsive" alt="华信智源" /> </div>
				<div class="time col-lg-6 col-sm-6 col-xs-6"></div>
			</div>

			<div class="info">
				<div class="info-title row">
					<div class="col-lg-12 col-sm-12 col-xs-12">
						<h2><strong>教师授课满意度问卷调查表</strong></h2>
					</div>
				</div>
				<div class="No row">
					<div class="col-lg-12 col-sm-12 col-xs-12">
						<p><strong>编号：</strong>HX-YNKM-QR-7.5-13</p>
					</div>
				</div>

				<p class="surinfo">&nbsp;<i class="fa fa-info-circle"><strong>&nbsp;
评价信息：</strong></i></p>

				<form class="bs-example bs-example-form" id="form1" role="form">
					<div class="row" style="padding: 2px 15px;">
						<div class="major col-lg-1 col-sm-1 col-xs-1"><strong>专业：</strong></div>
						<div class="drop-menu col-lg-11 col-sm-11 col-xs-11">
							<div class="input-group">
								<input type="text" class="form-control" id="text1" name="text1" placeholder="请选择专业" readonly="true" />
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            	    				    <span class="caret"></span>	
            	    				</button>
									<ul class="appendli1 dropdown-menu pull-right" role="menu">

									</ul>
								</div>
							</div>
						</div>
					</div>
				</form>

				<form class="bs-example bs-example-form" id="form2" role="form">
					<div class="row" style="padding: 2px 15px;">
						<div class="major col-lg-1 col-sm-1 col-xs-1"><strong>课程：</strong></div>

						<div class="drop-menu col-lg-11 col-sm-11 col-xs-11">
							<div class="input-group">
								<input type="text" class="form-control" id="text2" name="text2" placeholder="请选择课程" readonly="true" />
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            	    				    <span class="caret"></span>	
            	    				</button>
									<ul class="appendli2 dropdown-menu pull-right" role="menu">

									</ul>
								</div>
							</div>
						</div>
					</div>
				</form>

				<form class="bs-example bs-example-form" id="form3" role="form">
					<div class="row" style="padding: 2px 15px;">
						<div class="major col-lg-1 col-sm-1 col-xs-1"><strong>教师：</strong></div>

						<div class="drop-menu col-lg-11 col-sm-11 col-xs-11">
							<div class="input-group">
								<input type="text" class="form-control" id="text3" name="text3" placeholder="请选择教师" readonly="true" />
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            	    				    <span class="caret"></span>	
            	    				</button>
									<ul class="appendli3 dropdown-menu pull-right" role="menu">

									</ul>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>

			<form name="tableForm">
				<table class="table table-hover">
					<thead>
						<tr>
							<th rowspan="3" style="vertical-align: middle;text-align: center;">序号</th>
							<th rowspan="3" style="vertical-align: middle;text-align: center;">调查项</th>
							<th rowspan="3" style="vertical-align: middle;text-align: center;">调查细节项目</th>
							<th colspan="5" style="vertical-align: middle;text-align: center;">满意度得分</th>
						</tr>
						<tr>
							<th style="vertical-align: middle;text-align: center;">很满意</th>
							<th style="vertical-align: middle;text-align: center;">满意</th>
							<th style="vertical-align: middle;text-align: center;">一般</th>
							<th style="vertical-align: middle;text-align: center;">不满意</th>
							<th style="vertical-align: middle;text-align: center;">很不满意</th>
						</tr>
						<tr>
							<th style="vertical-align: middle;text-align: center;">5分</th>
							<th style="vertical-align: middle;text-align: center;">4分</th>
							<th style="vertical-align: middle;text-align: center;">3分</th>
							<th style="vertical-align: middle;text-align: center;">2分</th>
							<th style="vertical-align: middle;text-align: center;">1分</th>
						</tr>
					</thead>
					<tbody>
						<tr class="total">
							<td colspan="2" class="highlight">合计</td>
							<td class="scoretotal"></td>
							<td class="score5"></td>
							<td class="score4"></td>
							<td class="score3"></td>
							<td class="score2"></td>
							<td class="score1"></td>
						</tr>
						<tr>
							<td colspan="2" class="highlight">建议</td>
							<td colspan="6" class="jianyi" style="margin: 0;padding: 0;">
								<textarea cols="140" rows="3"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			<div class="tips">
				<div class="row">
					<p>&nbsp;<i class="fa fa-hand-o-right"><strong>&nbsp;
温馨提示：</strong></i></p>
					<ol>
						<li>评分前点击下拉菜单选择所在班级，课程，授课教师。</li>
						<li>点击表内满意程度分项内选择一项，鼠标左键点击圆圈选择，评分完成点击“提交”按钮提交评分。</li>
						<li>本问卷属无记名打分，为进一步提高我院教学质量，检验教师授课水平教学成效，请您本着公平、公正的态度认真、属实填写。</li>
					</ol>
				</div>
			</div>

			<div class="subbtn row">
				<div class="col-lg-12">
					<button type="button" class="btn btn-default" onclick="subTable();"> 提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</button>
				</div>
			</div>

			<div class="foot row">
				<div class="col-lg-12 col-sm-12 col-xs-12">
					<p>CopyRight 2005 Beijing CSTP Technology Co., LTD All right reserved</p>
				</div>
			</div>
		</div>

        <script type="text/javascript" src="js/jquery-produce-3.1.0.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/bootstrap.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/index.js" charset="UTF-8"></script>
		<script type="text/javascript">
			//生成表格评价项目
			$.ajax({
				type: "get",
				url: "GetSurCont",
				async: true,
				dataType: "json",
				success: function(data) {
					var num = 0;
					$.each(data, function(index, val) {
						var contlen = val.content.length + 1;
						$(".total").before("<<tr><td rowspan='" + contlen + "'" + "class='highlight'>" + val.id + "</td><td rowspan='" + contlen + "'" + "class='highlight'>" + val.name + "</td></tr>");

						$.each(val.content, function(index1, contVal) {
							num++;
							$(".total").before("<tr><td>" + contVal.name +
								"</td><td><input type='radio' name='line" + num + "'" + "class='col5' value='5'></td>" +
								"</td><td><input type='radio' name='line" + num + "'" + "class='col4' value='4'></td>" +
								"</td><td><input type='radio' name='line" + num + "'" + "class='col3' value='3'></td>" +
								"</td><td><input type='radio' name='line" + num + "'" + "class='col2' value='2'></td>" +
								"</td><td><input type='radio' name='line" + num + "'" + "class='col1' value='1'></td></tr>");
						});
					});
				}
			});

			//设置专业并且获取对应课程
			$.ajax({
				type: "get",
				url: "GetMajor",
				async: true,
				dataType: "json",
				success: function(data) {
					$.each(data, function(index, val) {
						$(".appendli1").append('<li onclick="textVal1(this);"><a href="javascript:getCourse();">' + val.name + '</a></li>');
					});
				}
			});

			function textVal1(obj) {
				var _this_ = obj;
				var inText = document.getElementById("text1");
				inText.value = _this_.innerText;
			}

			function getCourse() {

				var ali = $(".appendli2").find("li");
				if(ali.length != 0) {
					$(".appendli2").empty();
				};

				$.ajax({
					type: "get",
					url: "GetCourse",
					async: true,
					dataType: "json",
					data: $("#form1").serialize(),
					success: function(data) {
						$('.appendli2').append('<input type="checkbox" name="allSelect1">全选</input>');
						$.each(data, function(index, val) {
							$(".appendli2").append('<li><input type="checkbox" name="checkMajor" value="' + index + '">' + val.name + '</input></li>');
						});
						$('.appendli2').append('<input type="button" name="btn1" value="确  定"></button>');
					}
				});
			}

			//设置课程并且获取对应的老师
			$('.appendli2').on("click", "input[name=btn1]", function() {
				var str = "";
				$('input[name=checkMajor]').each(function() {
					var _this_ = this;
					if($(_this_).prop("checked") === true) {
						var textVal = $(_this_).parent().text();
						str += textVal + ","
					}
				});
				str = str.substring(0, (str.length - 1));
				$('input[name=text2]').prop("value", str);

				getTeacher();
			});

			function getTeacher() {

				var ali = $(".appendli3").find("li");
				if(ali.length != 0) {
					$(".appendli3").empty();
				};

				$.ajax({
					type: "get",
					url: "GetTeacher",
					async: true,
					dataType: "json",
					data: $("#form2").serialize(),
					success: function(data) {
						$('.appendli3').append('<input type="checkbox" name="allSelect2">全选</input>');
						$.each(data, function(index, val) {
							$(".appendli3").append('<li><input type="checkbox" name="chTeacher" value="' + index + '">' + val.name + '</input></li>');
						});
						$('.appendli3').append('<input type="button" name="btn2" value="确  定"></button>');
					}
				});
			}

			//设置评价教师并且提交到服务器
			$('.appendli3').on("click", "input[name=btn2]", function() {
				var str = "";
				$('input[name=chTeacher]').each(function() {
					var _this_ = this;
					if($(_this_).prop("checked") === true) {
						var textVal = $(_this_).parent().text();
						str += textVal + ","
					}
				});
				str = str.substring(0, (str.length - 1));
				$('input[name=text3]').prop("value", str);

				subTeacher();
			});

			function subTeacher() {
				$.ajax({
					type: "get",
					url: "SetTeacher",
					async: true,
					data: $("#form3").serialize()
				});
			}
			
			//提交表格评分radio和建议textarea
			function subTable() {
				$.ajax({
					type: "get",
					url: "SetSurDetail",
					async: true,
					data: $('form[name=tableForm]').serialize(),
					dataType:"text",
					success:function(data){
						if(data=="successful"){
							window.location.href="finish.html";
						}else{
							window.location.href="fail.html";
						}
					}
				});
			}
		</script>

	</body>

</html>